<template>
  <div>
    <h2 style="text-align: center;margin-top: -5px" >全部游戏</h2>
    <el-table
        :data="tableData.filter(data => !search || data.gameName.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
        ref="multipleTable"
        tooltip-effect="dark"
        stripe
        @selection-change="handleSelectionChange">
      <el-table-column
          label=""
      >
        <template  slot-scope="scope">
        <img
            preview
            :src="'http://localhost:8080/GameStore/images/'+scope.row.gameImg"
            style="width: 80px;height: 80px;border-radius: 8px;margin-left: 50px"
        >
        </template>
      </el-table-column>
      <el-table-column
          label="游戏名称"
          prop="gameName">
      </el-table-column>
      <el-table-column
          label="游戏类型"
          prop="gameType"
          :filters="[{ text: '角色扮演', value: '角色扮演' }, { text: '休闲益智', value: '休闲益智' },{ text: '经营策略', value: '经营策略' },{ text: '体育竞技', value: '体育竞技' },{ text: '动作射击', value: '动作射击' },{ text: '棋牌桌游', value: '棋牌桌游' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end">
      </el-table-column>

      <el-table-column
          label="价格"
          sortable
          width="180"
          prop="price">
        <template slot-scope="scope">
          ¥{{scope.row.price}}
        </template>
      </el-table-column>
      <el-table-column
          label="销量"
          sortable
          width="180"
          prop="saleCount">
      </el-table-column>
      <el-table-column type="expand" style="width:20px">
        <template slot-scope="props">

          <el-row :gutter="20">
            <el-col :span="8">
              <div>
                <el-statistic group-separator="," :precision="2"  title="评分">

                </el-statistic>
                <el-rate
                    style="text-align: center"
                    v-model="value"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}">
                </el-rate>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <el-statistic  title="销量">
                  <template slot="formatter">
                    {{props.row.saleCount}}
                  </template>

                </el-statistic>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <el-statistic  title="年满16周岁">
                  <template slot="formatter">
                    16+
                  </template>

                </el-statistic>
              </div>
            </el-col>
          </el-row>
          <el-divider></el-divider>


          <el-row :gutter="20">
            <el-col :span="15">
              <div>
                <div style="text-align: center"><strong style="font-size: 15px;text-align: center" >详情图片</strong></div>
                <br>
                <div style="height: 300px;width: 500px;text-align: center;margin: auto">
                  <el-carousel height="300px" width="300px" >
                    <el-carousel-item v-for="item in props.row.detailGameImg" :key="item">
                      <img
                          preview
                          :src="'http://localhost:8080/GameStore/images/'+item"
                          style="width: 500px;height: 300px;border-radius: 8px"
                      >
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <div ><strong style="font-size: 15px" >游戏介绍</strong></div>
                <br>
                <div style="text-align:left;margin-right: 50px">{{props.row.description}}</div>
              </div>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </template>
      </el-table-column>
      <el-table-column
          label=""
          style="width: 2px">
        详情
      </el-table-column>
      <el-table-column
          align="right"
          width="220">
        <template slot="header" slot-scope="scope">
          <el-input
              size="mini"
              v-model="search"
              placeholder="输入关键字搜索">
            <el-button slot="append" icon="el-icon-search" style="float: left"></el-button>
          </el-input>
        </template>
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">加入购物车</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">立即购买</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
<!--    分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[1,,5,10,100, 200, 300, 400]"
        :page-size="size"
        layout="total, sizes, prev, pager, next"
        :total="total"
    style="float: right">
    </el-pagination>

  </div>
</template>

<script>
export default {
  name: "allGames",
  data() {
    return {
      value: 3.7,
      total: 0,
      size: 100,
      current: 1,
      tableData: [
        {
          gameId:1,
          saleCount:150505,
          gameName:"GOD OF WAR",
          price:279,
          gameImg:'@/assets/logo.png',
          description:"奎托斯复仇奥林匹斯众神的往事已尘封多年，他现在以凡人的身份生活在北欧众神和怪物环伺的领土中。在这片极...",
          gameType:"动作",
          detailGameImg:"http://dummyimage.com/400x400"
        },
        {
          gameId:2,
          saleCount:150505,
          gameName:"123",
          price:2,
          gameImg:"@/assets/logo.png",
          description:"奎托斯复仇奥林匹斯众神的往事已尘封多年，他现在以凡人的身份生活在北欧众神和怪物环伺的领土中。在这片极...",
          gameType:"动作",
          detailGameImg:"http://dummyimage.com/400x400"
        }
      ],
      search: ''
    }
  },
  created(){
    this.getGameList();
  },
  methods: {
    filterTag(value, row) {
      return row.gameType === value;
    },
    getGameList() {
      this.$axios.get('/allGames',{
        params:{
          size:this.size,
          current:this.current
        }
      }).then(res => {
        this.tableData = res.data.gameList
        this.total= res.data.total
        this.current= res.data.current
      })
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.$message({
        showClose: true,
        message: '请先登录',
        type:'error',
      });
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$message({
        showClose: true,
        message: '请先登录',
        type:'error',
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size=val;
      this.getGameList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current=val;
      this.getGameList();
    }
  },
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
</style>